<template>
  <div id="homeMap"></div>
</template>

<script>
import yunnan from '../common/json/yunnan'

export default {
  data () {
    return {

    }
  },
  methods: {
    getChartMap () {
      let echart = require('echarts')
      echart.registerMap('yunnan', yunnan)
      let optionMap = {
        series: [
          {
            type: "scatter",
            // name: '农资厂',
            coordinateSystem: "geo",
            // hoverAnimation: true,
            // legendHoverLink: true,
            // symbol: "image://" + iconUrl,
            symbol: "pin",
            symbolSize: 20,
            itemStyle: {
              color: "#1DE9B6",
            },
            selectedMode: "single",
            emphasis: {
              scale: true,
            },
            select: {
              // symbol: "image://" + selecticon,
              itemStyle: {
                color: "pink",
              },
            },
            data: [
              [
                101.512805,
                23.942261
              ],
              [
                98.888014,
                25.634791
              ],
              [
                102.124635,
                24.952351
              ],
            ],
          },
          {
            name: "云南地图",
            type: "map",
            map: "yunnan", //#3
            top: "3%",
            bottom: "10%",
            left: "17%",
            right: "17%",
            label: {
              show: true,
              color: "#FFFFFF",
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "#87BFFF", //区域边框色
              areaColor: "#9B89F3", //区域背景色 },
            },
            emphasis: {
              //选中 （非点击）
              itemStyle: {
                borderWidth: 1,
                borderColor: "#87BFFF", //区域边框色
                areaColor: "#5C71E3", //区域背景色 },
                // label: { show: true }
              },
              label: {
                color: "#0a1b38",
              },
            },
            select: {
              itemStyle: {
                areaColor: "#19d1ff",
              },
              label: {
                color: "#0a1b38",
              },
            },
            data: this.mapData,
          },
        ],
        geo: {
          map: "yunnan",
          show: true,
          zoom: 1, //地图缩放大小
          // selectedMode: 'single',
          top: "3%",
          bottom: "10%",
          left: "17%",
          right: "17%",
          itemStyle: {
            normal: {     //未选中
              borderWidth: 1,
              borderColor: '#87BFFF',//区域边框色
              areaColor: '#00A1DD',//区域背景色 },
              label: { show: true },
              shadowBlur: 20,
              shadowOffsetX: 10,
              shadowOffsetY: 10,
            },
            emphasis: {    //选中 （非点击）
              borderWidth: 1,
              borderColor: '#ffffff',//区域边框色
              areaColor: '#1DE9B6',//区域背景色 },
              label: { show: true }
            }
          },
        },
      };
      let myEchart = echart.init(document.getElementById('homeMap'));
      myEchart.setOption(optionMap);
      window.addEventListener("resize", () => {
        myEchart.resize();
      });
    }
  },
  created () {

  },
  mounted () {
    this.getChartMap()

  }
}
</script>

<style scoped>
#homeMap {
  /* height: calc(100% - 25.9%); */
  height: calc(100vh - 30vh);
  width: 100%;
}
</style>
